<template>
  <div class="mobile-ecology-1">
    <div v-slide-plus class="ecology-title">PRODUCTS</div>
    <div class="ecology-slogan">
      <div v-slide-plus>智控未来，一触即发</div>
      <div v-slide-plus>打造您的专属智能生态圈</div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.mobile-ecology-1 {
  width: 100%;
  min-height: 25rem;
  background: url("../../../../assets/ecology/banner_bg_1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .ecology-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.25rem;
    height: 2.25rem;
    border-radius: 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #ccc 0%, rgba(0, 0, 0, 0) 100%);
  }
  .ecology-slogan {
    width: 100%;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 3.125rem;
    color: #fff;
    text-align: center;
    margin-top: 2.5rem;
  }
}
</style>
